<template>
  <div class="content-component">
    <component :is="templateName" v-if="templateName" :layout="layoutStyle" :show-header="true" :temp="temp" @fetch-entity="callBackEntity" />
  </div>
</template>

<script>
export default {
  name: 'MoreContent',
  data() {
    return {
      templateName: null,
      layoutStyle: {},
      temp: null,
      column: {}
    };
  },
  watch: {
    column: {
      handler(newName, oldName) { // 值发生变化时
        if (undefined !== newName && newName !== null) {
          if (newName.showHeader === true) {
            this.mb = newName.mb;
            this.dl = newName.mbdl;
            this.fl = newName.mbfl;
            this.temp = newName;
            this.menuName = newName.menuName;
            this.menuId = newName.menuId;
            this.columnName = newName.columnName;
            const path = '/' + this.dl + '/' + this.fl + '/more/' + this.mb;
            const res = () => import(`@/template${path}`);
            this.templateName = res;
          } else {
            this.mb = newName.data.mb;
            this.dl = newName.data.mbdl;
            this.fl = newName.data.mbfl;
            this.menuName = newName.column.menu.name;
            this.menuId = newName.column.menu.id;
            this.columnName = newName.lmmc;
            this.temp = newName.data;
            const path = '/' + this.dl + '/' + this.fl + '/more/' + this.mb;
            const res = () => import(`@/template${path}`);
            this.templateName = res;
          }
        } else {
          this.templateName = null;
        }
      },
      immediate: false, // 父组件第一次传值时，执行handler，false则第一次不执行
      deep: false // formType为对象时，设置为true，此属性监听对象发生变化
    }
  },
  methods: {
    init(data) {
      this.column = data;
    },
    callBackEntity(data) {
      this.$emit('callBack', data);
    }
  }
};
</script>

<style scoped>

</style>
